<template>
	<div>
		<!-- 实时数据 -->
		<div>
			<el-descriptions :column="2" size="small" border>
				<el-descriptions-item label="设备编码" min-width="80">{{ siteInfo?.equipmentCode }}</el-descriptions-item>
				<el-descriptions-item label="设备名称" min-width="80">{{ siteInfo?.name }}</el-descriptions-item>
				<el-descriptions-item label="采集时间" min-width="80">{{ recordTime }}</el-descriptions-item>
				<el-descriptions-item label="所属企业" min-width="80">{{ airSiteName }}</el-descriptions-item>
				<el-descriptions-item label="设备状态" min-width="80">
					<el-tag :type="siteInfo?.status === 2 ? 'success' : 'danger'">{{ siteInfo?.status === 2 ? '在线' : '离线' }}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="AQI" min-width="80" v-if="aqiInfo?.aqi">
					<el-tag effect="dark" size="small" class="w-full !text-[#000]" :color="levelInfo?.color">{{ aqiInfo?.aqi }}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="首要污染物" min-width="80" v-if="aqiInfo?.aqi">
					{{ aqiInfo?.name }}
				</el-descriptions-item>
				<el-descriptions-item label="污染等级" min-width="80" v-if="aqiInfo?.aqi">
					<el-popover width="320" placement="left" title="污染影响和措施">
						<div class="indent-[2em]">影响：{{ levelInfo?.influence }}</div>
						<div class="indent-[2em]">措施：{{ levelInfo?.measures }}</div>
						<template #reference>
							<el-tag effect="dark" size="small" class="w-full !text-[#000] cursor-pointer" :color="levelInfo?.color">{{ aqiInfo?.degree }}</el-tag>
						</template>
					</el-popover>
				</el-descriptions-item>
				<el-descriptions-item v-for="(item, index) in data" :label="item.cnName" :key="index">{{ item.val }} {{ item.unit }}</el-descriptions-item>
				<el-descriptions-item label="安装前照片" min-width="80">
					<el-image
						class="w-[100px] h-[60px]"
						fit="cover"
						:previewSrcList="[
							siteInfo?.beforeEquipmentInstall.includes('http') ? siteInfo?.beforeEquipmentInstall : baseURL + siteInfo?.beforeEquipmentInstall,
						]"
						:src="siteInfo?.beforeEquipmentInstall.includes('http') ? siteInfo?.beforeEquipmentInstall : baseURL + siteInfo?.beforeEquipmentInstall"
					></el-image>
				</el-descriptions-item>
				<el-descriptions-item label="安装后照片" min-width="80">
					<el-image
						class="w-[100px] h-[60px]"
						fit="cover"
						:previewSrcList="[
							siteInfo?.afterEquipmentInstall.includes('http') ? siteInfo?.afterEquipmentInstall : baseURL + siteInfo?.afterEquipmentInstall,
						]"
						:src="siteInfo?.afterEquipmentInstall.includes('http') ? siteInfo?.afterEquipmentInstall : baseURL + siteInfo?.afterEquipmentInstall"
					></el-image>
				</el-descriptions-item>
			</el-descriptions>
		</div>
	</div>
</template>

<script setup lang="ts">
import { level } from '../data';
const prop = defineProps({
	data: {
		type: Array<{ val: number; unit: string; cnName: string }>,
		default: () => [],
	},
	siteInfo: {
		type: Object,
		default: () => {},
	},
	aqiInfo: {
		type: Object,
	},
	recordTime: {
		type: String,
		default: '',
	},
	airSiteName: {
		type: String,
		default: '',
	},
});
const getLevel = (l: number) => {
	const item = level.find((d) => {
		return d.pollutionDegree === l;
	});
	return item;
};
const levelInfo = computed(() => {
	return getLevel(prop.aqiInfo?.pollutionDegree);
});
</script>

<style lang="scss" scoped>
:deep(.el-tag) {
	border: none;
}
</style>
